<template>
	<view class="video-list">
		<view class="video-item mt20 pb20" v-for="(article, index) in list" :key="article.id" @tap="goDetail(article)">
			<view class="video-box">
				<FullVideo :url="article.videoUrl" :article="true" width="710rpx" height="400rpx" buttonWidth="120rpx"></FullVideo>
			</view>
			<view class="item-title text-hidden two">
				<text class="text-primary">{{article.title}}</text>
			</view>
			<view class="item-foot flex-r ac jsb">
				<view class="expert-info flex-r ac" @tap.stop="$CHS.goExpertHome(article.userId, article.userType)">
					<lazy-image class="image border-round" :src="article.userAvatar+'?imageView2/1/w/100/h/100/q/50'" type="expert" fit="cover"></lazy-image>
					<text class="text-small">{{article.userName}}</text>
				</view>
				<view class="view-info flex-r ac">
					<image class="comment-icon" src="@/public/images/bar/comment.png" mode="aspectFit"></image>
					<text class="text-small">{{article.commentNum || 0}}</text>
					<image class="view-icon" src="@/public/images/bar/views.png" mode="aspectFit"></image>
					<text class="text-small">{{article.virtualReadNum || 0}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "VideoDiscuss",
		props: {
			list: {
				type: Array,
				default: () => []
			}
		},
		computed: {
			user() {
				return this.$store.state.user
			}
		},
		methods: {
			//进入详情
			goDetail(article) {
				if(article.blacklist === 1 && (article.userType != 'user' || article.userId != this.user.userId)){
					this.$ShowToast({text: '您已被拉入黑名单，不能访问当前内容', type: 2, time: 3})
					return
				}
				uni.$once('readNum', (data)=>{
					article.virtualReadNum = data.num
				})
				let params = {barId: article.forumId, barName: article.forumName, barLogo: article.logo, type: article.userType || 'expert'}
				this.$CHS.goDiscussDetail(article.id, params)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.video-list{
		.video-item{
			.item-title{
				margin-top: 15rpx;
				max-width: 710rpx;
				font-weight: 500;
				line-height: 42rpx;
			}
			.item-foot{
				margin-top: 15rpx;
				.expert-info{
					.image{
						width: 48rpx;
						height: 48rpx;
						margin-right: 20rpx;
					}
				}
				.view-info{
					flex: 2;
					justify-content: flex-end;
					.comment-icon, .view-icon{
						margin-right: 20rpx;
						width: 32rpx;
						height: 32rpx;
					}
					.view-icon{
						margin-left: 40rpx;
					}
				}
			}
		}
	}
</style>